<template>
    <view class="top-list">
        <view class="item" v-for="(item, index) in list" :key="index">
            <view class="cover">
                <image class="pic" :src="item.pic" />
                <image class="index" :src="require(`@/static/images/rank/${index + 1}.png`)" />
            </view>

            <view class="det">
                <text class="title">{{ item.title }}</text>
                <text class="number">已抢{{ item.receiveVirtualNum }}件</text>
                <view class="price">
                    <text class="now">{{ item.endPrice }}</text>
                    <text class="old">￥{{ item.price }}</text>
                </view>

                <image
                    class="btn"
                    :class="`statis-` + type + '-' + index"
                    src="@/static/images/grab-btn.png"
                    @tap="toBuy(item, type, index + 1)"
                />
            </view>
        </view>
    </view>
</template>

<script>
import Buy from '@/mixins/buy';

export default {
    mixins: [Buy],

    props: {
        list: Array,
        type: String
    }
};
</script>

<style lang="scss" scoped>
@import '@/static/css/common.scss';

.top-list {
    background-color: #fff;
    background-image: linear-gradient(to right, #fceec3 1%, #fff 36%);
    margin: 316rpx 20rpx 20rpx 20rpx;
    position: relative;
    border-radius: 20rpx;
    height: 684rpx;

    .item {
        display: flex;
        align-items: center;
        position: relative;
        padding: 20rpx 26rpx;

        .cover {
            height: 186rpx;
            width: 186rpx;

            .pic {
                display: block;
                height: 100%;
                width: 100%;
                border-radius: 20rpx;
                background-color: #fff;
            }

            .index {
                width: 64rpx;
                height: 60rpx;
                display: block;
                position: absolute;
                left: 2rpx;
                top: -12rpx;
                z-index: 9;
            }
        }

        .btn {
            height: 68rpx;
            width: 124rpx;
            position: absolute;
            right: 26rpx;
            bottom: 28rpx;
        }

        .det {
            flex: 1;
            margin-left: 30rpx;
            height: 186rpx;

            .title {
                color: #171717;
                font-weight: 500;
                font-size: 28rpx;
                @include text_ellipsis(1);
            }

            .number {
                color: #717076;
                font-size: 24rpx;
            }

            .price {
                position: absolute;
                left: 240rpx;
                bottom: 28rpx;

                .now {
                    color: #f70114;
                    font-size: 32rpx;
                    font-weight: bold;

                    &::before {
                        content: '￥';
                        font-size: 24rpx;
                    }
                }

                .old {
                    color: #717076;
                    font-size: 24rpx;
                    text-decoration: line-through;
                    margin-left: 20rpx;
                }
            }
        }
    }
}
</style>
